<template>
  <div class="page">
    <UserLayout>
      <!-- sidebar -->
      <template #sidebar>
        <UserCard class="user-card" :avatarUrl="avatarUrl" :nickname="nickname" :signature="signature" :score1="score1"
          :score2="score2" @edit="handleEdit">
        </UserCard>
        <el-divider />
        <SideBarMenu></SideBarMenu>
      </template>
      <template #content>
        <!-- 不跳转用户编辑、文档编辑页面 -->
        <router-view></router-view>
      </template>
    </UserLayout>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import UserLayout from './layout.vue'
import UserCard from './components/UserCard.vue'
import SideBarMenu from './components/SideBarMenu.vue'

export default {
  name: 'UserView',
  components: { UserLayout, UserCard, SideBarMenu },
  computed: {
    ...mapState({
      avatarUrl: state => state.user.avatarUrl,
      nickname: state => state.user.nickname,
      signature: state => state.user.signature,
      score1: state => ({ name: '关注', num: state.user.follws.length }),
      score2: state => ({ name: '粉丝', num: state.user.fans })
    })
  },
  methods: {
    handleEdit() {
      // console.log("[Debug] handle edit")
      this.$router.push({ name: 'user-editor' })
    }
  }
}
</script>

<style lang="scss" scoped>
.user-card {
  margin-top: 16px;
}

.menu-wrapper {
  padding-bottom: 40px;
}
</style>